<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <style>
   div{
     width:200px;
	 height:200px;
	 border:solid 1px black;
	 background-color:yellow;
   }
   button{
     cursor:pointer;
   }
 </style>
 <body>
    <button id="btn_1">黄色</button>
	<button id="btn_2">红色</button>
	<button id="btn_3">蓝色</button>
	<button id="btn_4">黑色</button>
	<button id="btn_5">白色</button>
    <div id="div"></div>
 </body>
 <script>
    var btn_1 = document.getElementById("btn_1");
	var btn_2 = document.getElementById("btn_2");
	var btn_3 = document.getElementById("btn_3");
	var btn_4 = document.getElementById("btn_4");
	var btn_5 = document.getElementById("btn_5");

	var div = document.getElementById("div");
    function yellow(){
	   div.style.backgroundColor = "yellow";
	}
	function red(){
	   div.style.backgroundColor = "red";
	}
	function blue(){
	   div.style.backgroundColor = "blue";
	}
	function black(){
	   div.style.backgroundColor = "black";
	}
	function white(){
	   div.style.backgroundColor = "white";
	}

	btn_1.addEventListener("click",yellow);
	btn_2.addEventListener("click",red);
	btn_3.addEventListener("click",blue);
	btn_4.addEventListener("click",black);
	btn_5.addEventListener("click",white);
 </script>
</html>
